	<script type="text/javascript">
	  $(function() {
	  	$(document).ready(function(){
		$("#agregar").click(function(){
				$("#otro").val("1");
				$("#f1").submit();
			});	 
		$("#ambiente" ).change(function() {
			$("#otro").val("2");
			$("#f1").submit();
		  // Check input( $( this ).val() ) for validity here
		}); 
		
		});
	  });
	</script>	

<div style="width:90%; margin:40px auto 60px auto;">
	<div class="panel panel-default">
		<div class="panel-heading" style="padding:3px 15px;text-align:right;">
			<div style="width:50%;float:left;margin-top:4px;font-size:18px;">USUARIOS</div>
			<button data-toggle="modal" data-target="#editModal" class="btn btn-primary btn-sm" type="button">
				<span class="glyphicon glyphicon-plus-sign"></span> Agregar Usuario
			</button>
		</div>
		<div class="panel-body" style="padding-bottom:10px;">
			<table cellpadding="0" cellspacing="0" border="0" id="example" class="table table-striped table-bordered">
				<thead>
					<tr>
						<th style="text-align: center;">ID</th>
						<th style="text-align: center;">USUARIO</th>
						<th style="text-align: center;">PERFIL</th>
						<th style="text-align: center;">OPCIONES</th>
					</tr>
				</thead>
				<tbody>
				<?php foreach ($usuarios as $u) { ?>
					<tr>
						<td><?php echo $u['Usuario']['id']; ?></td>
						<td><?php echo $u['Usuario']['usuario']; ?></td>
						<td><?php echo $u['Usuario']['perfil']; ?></td>
						<td style="text-align: center" id="options">
							<a style="text-decoration:none;" href="../Usuarios/editar?id=<?php echo $u['Usuario']['id']; ?>" title="Editar" data-toggle="tooltip" data-placement="left" data-delay="300" >
								<button data-toggle="modal" data-target="#editModal" class="btn btn-success btn-xs" type="button" id="agregar">
									<span class="glyphicon glyphicon-edit"></span>
								</button>
								
							</a>
							<a href="../Usuarios/borrar?id=<?php echo $u['Usuario']['id']; ?>" onclick="return confirm('¿Desea Eliminar este Usuario?');" title="Borrar" data-toggle="tooltip" data-placement="right" data-delay="300" >
								<button type="button" class="btn btn-danger btn-xs">
									<span class="glyphicon glyphicon-trash"></span>
								</button>
							</a>
						</td>
					</tr>
				<?php } ?>
				</tbody>
			</table>
		</div>
	</div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
      		<form action="../Usuarios/listar" method="post" class="form-horizontal" role="form">
	        	<div class="modal-header">
	          		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	          		<h4 class="modal-title" style="text-align:center;color:#194D89;">AGREGAR USUARIO</h4>
	        	</div>
	        	<div class="modal-body">
					<div class="form-group">
				    	<label style="text-align:right;padding-right:0;" for="input1" class="col-lg-2 control-label">ID</label>
				    	<div class="col-lg-10">
				      		<input name="data[Usuario][id]" type="text" class="form-control" id="input1" placeholder="ID">
				    	</div>
				  	</div>
					<div class="form-group">
				    	<label style="text-align:right;padding-right:0;" for="input2" class="col-lg-2 control-label">Usuario</label>
				    	<div class="col-lg-10">
				      		<input name="data[Usuario][usuario]" type="text" class="form-control" id="input2" placeholder="Usuario">
				    	</div>
				  	</div>
				  	<div class="form-group">
				    	<label style="text-align:right;padding-right:0;" for="inputPassword" class="col-lg-2 control-label">Contraseña</label>
				    	<div class="col-lg-10">
				      		<input name="data[Usuario][contrasena]" type="password" class="form-control" id="inputPassword" placeholder="Contraseña">
				    	</div>
				  	</div>
				  	<div class="form-group">
				    	<label style="text-align:right;padding-right:0;" for="input3" class="col-lg-2 control-label">Perfil</label>
				    	<div class="col-lg-10">
				      		<input name="data[Usuario][perfil]" type="text" class="form-control" id="input3" placeholder="Perfil">
				    	</div>
				  	</div>
				</div>
	        	<div class="modal-footer">
	          		<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
	          		<input type="submit" class="btn btn-primary" value="Guardar"/>
	        	</div>
			</form>
		</div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script>
	$('#options a').tooltip()
</script>
